<template>
  <div class="container">
    <div class="header">
      <Header></Header>
    </div>

    <div class="main">
      <Main :tableData="tableData" :orderTotal="orderTotal" @tabs="handleTabs"></Main>
    </div>
    <Pagination :total="pageTotal" :page="page" @pagination="handlePagination"></Pagination>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Main from '../components/main.vue'
import orderList from '../mock/orderList'
export default {
  components: {
    Header,
    Main
  },
  data () {
    return {
      status: 0,
      tableData: [],
      orderTotal: {
        not_paid: 0,
        paid: 2,
        not_shipped: 3,
        shipped: 3,
        not_comment: 6
      },
      pageTotal: 100,
      page: 1
    }
  },
  created () {
    console.log(orderList);
    this.tableData = orderList.data.items
  },
  methods: {
    handleTabs (val) {
      console.log('val', val);
      this.status = val
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit(true)
      })
    },
    handlePagination () { }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  padding-bottom: 50px;
}
.header {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
</style>